<!--
 * @Description: 左侧菜单
 * @Author: wangfuwei
 * @Date: 2020-12-17 21:03:17
 * @LastEditors: wangfuwei
 * @LastEditTime: 2021-04-22 16:38:39
 * @FilePath: /horizon-frontend/src/components/SideMenu/SideMenu.vue
-->
<template>
  <div class="ant-layout-sider" ref="sider">
    <div class="side-menu" :style="{ position: collapsed ? 'absolute' : '' }" @mouseover="sideHover = true" @mouseleave="sideHover = false">
      <vue-scroll :ops="{ scrollPanel: { scrollingX: false } }">
        <a-popover v-for="item in menus" :key="item.fdId" placement="rightTop" v-model="visible[item.fdId]" trigger="hover" @visibleChange="visible => (popoverVisible = visible)" :get-popup-container="() => $refs.sider" :mouseEnterDelay="0.1" overlayClassName="sub-menu">
          <!-- 左侧菜单 -->
          <div :title="$t(`${item.fdId}.name`)" :class="['menu-item', { active: visible[item.fdId] }]">
            <div class="icon">
              <a-icon v-if="item.icon" :type="item.icon" />
            </div>
            <div class="title" v-show="sideShow">
              <span v-text="$t(`${item.fdId}.name`)" />
            </div>
            <!-- 收藏 -->
            <div :class="['star', { shortcut: item.shortcut }]" v-if="!item.children" style="visibility:hidden">
              <a-icon type="star" :theme="item.shortcut ? 'filled' : 'outlined'" />
            </div>
          </div>

          <!-- 二级菜单 -->
          <template slot="content" v-if="item.children">
            <sub-menu :menu="item" />
          </template>
        </a-popover>
      </vue-scroll>

      <!-- 底部按钮 -->
      <div @click="siderToggle" class="menu-collapsed" :style="{ minWidth: sideShow ? '140px' : '50px' }">
        <a-icon type="pushpin" :class="collapsed ? '' : 'rotate'" />
      </div>
    </div>
  </div>
</template>

<script>
import { triggerWindowResizeEvent } from "@/utils/util";
import SubMenu from "./SubMenu";

export default {
  name: "SideMenu",
  components: { SubMenu },
  props: {
    menus: {
      //菜单列表
      type: Array,
      required: true,
      defalut: [],
    },
  },
  data() {
    return {
      collapsed: false, //左侧菜单是否收缩
      sideHover: false, //左侧菜单是否焦点
      visible: {}, //二级菜单显隐
      popoverVisible: false, //是否有二级菜单显示
    };
  },
  computed: {
    sideShow() {
      //左侧菜单是否全尺寸显示
      if (!this.collapsed) return true;
      if (this.sideHover || this.popoverVisible) return true;
      return false;
    },
  },
  methods: {
    /**
     * 侧边栏展开或收缩
     */
    siderToggle() {
      this.collapsed = !this.collapsed;
      triggerWindowResizeEvent();
    },
  },
};
</script>

<style lang="less" scoped>
@import "~ant-design-vue/lib/style/themes/default";

.ant-layout-sider {
  min-width: 50px;
  max-width: 200px;
  display: inline-table;

  /** 侧边栏菜单 */
  .side-menu {
    height: calc(100% - 52px);
    min-height: calc(100vh - 52px);
    background: #343848;
    box-shadow: 1px 0 0 0 #d9dada;
    color: #c1cadc;
    z-index: 1000;

    padding-top: 10px;
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;

    .__vuescroll {
      /deep/ .__view {
        display: flex;
        flex-direction: column;
      }
    }

    .menu-item {
      display: inline-flex;
      cursor: pointer;

      div {
        height: 50px;
        display: flex;
        align-items: center;
      }

      .icon {
        width: 50px;
        justify-content: center;
        font-size: 22px;
        flex-shrink: 0;
      }

      .title {
        padding-right: 10px;
        font-size: 13px;
        max-width: 150px;
        min-width: 90px;
        span {
          margin-right: 15px;
          white-space: nowrap;
          user-select: none;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .star {
        font-size: 13px;
        position: absolute;
        right: 10px;
        color: #fff;
        &:hover,
        &.shortcut {
          color: #ffc859;
        }
      }

      &:hover {
        .star {
          visibility: visible !important;
        }
      }

      &:hover,
      &.active {
        color: @primary-color;
        background: #262626;
        transition-delay: 0.1s;
      }
    }

    /** 侧边栏收缩按钮 */
    .menu-collapsed {
      font-size: 20px;
      bottom: 0;
      max-width: 200px;
      height: 50px;
      border-top: 1px solid rgba(218, 222, 237, 0.1);
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;

      .rotate {
        transform: rotate(-45deg);
      }

      &:hover {
        color: @primary-color;
      }
    }
  }
}
</style>
